
<template>
  <view class="help-center-page">
    <!-- 帮助文章列表 -->
    <scroll-view class="help-list" scroll-y>
      <view
          class="help-item"
          v-for="(item, index) in helpList"
          :key="index"
          @tap="viewHelpDetail(item)"
      >
        <view class="help-content">
          <text class="help-title">{{ item.title }}</text>
          <view class="help-meta">
            <text class="help-date">{{ item.date }}</text>
            <text class="help-author">{{ item.author }}</text>
          </view>
        </view>
        <view class="arrow-icon">
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="helpList.length === 0" class="empty-state">
        <text class="empty-text">暂无帮助文章</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>export default {
  data() {
    return {
      helpList: [
        {
          id: 1,
          title: '如何查看工地施工进度？',
          date: '2024-01-15',
          author: '客服中心'
        },
        {
          id: 2,
          title: '装修材料选择指南',
          date: '2024-01-12',
          author: '设计部'
        },
        {
          id: 3,
          title: '常见问题解答',
          date: '2024-01-10',
          author: '客服中心'
        },
        {
          id: 4,
          title: '如何申请售后服务？',
          date: '2024-01-08',
          author: '客服中心'
        },
        {
          id: 5,
          title: '质保卡使用说明',
          date: '2024-01-05',
          author: '售后部'
        },
        {
          id: 6,
          title: '文件中心使用教程',
          date: '2024-01-03',
          author: '技术部'
        }
      ]
    }
  },
  methods: {
    viewHelpDetail(helpItem) {
      // 跳转到帮助详情页
      uni.navigateTo({
        url: `/pages/user/help_detail?id=${helpItem.id}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>.help-center-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.header-section {
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.page-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 36rpx;
  background: linear-gradient(to bottom, #e4393c, #409EFF);
  border-radius: 4rpx;
}

.help-list {
  flex: 1;
}

.help-item {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.help-content {
  flex: 1;
}

.help-title {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
  line-height: 1.4;
}

.help-meta {
  display: flex;
  justify-content: space-between;
}

.help-date {
  font-size: 24rpx;
  color: #999;
}

.help-author {
  font-size: 24rpx;
  color: #666;
}

.arrow-icon {
  margin-left: 20rpx;
  width: 30rpx;
  height: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-text {
  color: #999;
  font-size: 28rpx;
}
</style>